<style scoped lang="less">
.highquality {
  max-width: 800px;
  margin: 0 auto 20px;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  &__back-image{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(30px);
  }

  &__info{
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 010px;
    display: flex;
    flex-flow: row;
    align-items: center;
    &__cover{
      position: relative;
      margin-right: 10px;
      &__image{
        border-radius: 10px;
        width: 130px;
        height: 130px;
        object-fit: cover;
        display: block;
      }

      &__play{
        transition: all ease-in-out .3s;
        position: absolute;
        left: 4px;
        bottom: 4px;
        border-radius: 50%;
        background: rgba(153, 153, 153, 0.2);
        backdrop-filter: blur(10px);
        &:hover{ background: rgba(153, 153, 153, 0.6);cursor: pointer}
        &__icon{
          padding: 4px;
          width: 20px;
          height: 20px;
          display: block;
        }
      }
    }

    &__right{

      &__tag{
        width: 80px;
        display: flex;
        flex-flow: row nowrap;
        border-radius: 20px;
        padding: 4px 8px;
        border: 1px solid #dcdc0d;
        justify-content: center;
        &__icon{
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }
        &__text{
          font-size: 14px;
          color: #dcdc0d;
        }
      }

      &__title{
        color: white;
        margin-top: 20px;
      }
    }
  }
}
.fade-enter-active,
.fade-leave-active{
  opacity: 0;
  margin-top: -150px;
  transition: all ease-in-out .3s;
}
.fade-enter-to{
  opacity: 1;
  margin-top: 0;
}
.fade-leave-to{
  opacity: 0;
  margin-top: -170px;
}

</style>
<template>
  <transition name="fade">
    <div class="highquality" v-if="apiData">
      <img :src="info.imageUrl" class="highquality__back-image">
      <div class="highquality__info">
        <div class="highquality__info__cover">
          <img :src="info.imageUrl" class="highquality__info__cover__image">
          <div class="highquality__info__cover__play" @click="handlePlayList">
            <img :src="play" class="highquality__info__cover__play__icon">
          </div>
        </div>
        <div class="highquality__info__right">
          <div class="highquality__info__right__tag">
            <img :src="king" alt="" class="highquality__info__right__tag__icon">
            <div class="highquality__info__right__tag__text">精品歌单</div>
          </div>
          <div class="highquality__info__right__title">{{ info.title }}</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts" setup>
//@ts-ignore
import king from '../../icon/king.png'
//@ts-ignore
import play from '../../icon/play.png'
import netEasyMusicStore from '../../store'
import { AxiosService } from '@/core'
import {computed, ref, watch} from "vue";
const axios = new AxiosService('netEasyMusic')

// todo 数据
const props = defineProps({
  category:{ type:String , default: null }, // 类目
})
const apiData = ref(null)
const info = computed(() => ({
  imageUrl: apiData.value?.coverImgUrl,
  title: apiData.value?.name ?? '未知'
}))
// 监听改变类目
watch(() => props.category, (value:any) => {
  getPlayList()
})
// 请求
// 精品歌单
const getPlayList = () => {
  axios.get({
    api:'/top/playlist/highquality',
    params:{limit:1,cat: props.category},
    success: ({playlists}) => apiData.value = playlists?.[0] ?? null
  })
}
getPlayList()

// 交互
/** 播放歌单 */
const handlePlayList = () => {
  const { id } = apiData.value ?? { id: null }
  if(!id) return
  axios.get({
    api:'/playlist/track/all',
    params:{id},
    success: ({songs}) => netEasyMusicStore.setPlayList(songs.map((ele:any) => ele.id),true)
  })
}
</script>

